<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>((cityName))-天气预报 | PPYY天气网</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <style>
        .flex-container {
            display: flex;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div id="app">
        
        <el-row class="flex-container">
            <el-card style="width: 800px; height: 300px; margin: 0 auto;">
                <el-row>
                    <el-col :span="4">
                        <span style="font-size: 24px; font-weight: bolder;">((cityName))</span>
                    </el-col>
                    <el-col :offset='16' :span='8'>
                        ((realtimeWeather.updateTime)) 更新
                    </el-col>
                </el-row>

                <el-row class="flex-container">
                    <el-col :span="4" style="font-size: 64px;">
                        ((realtimeWeather.temperature))
                    </el-col>
                    <el-col :span="2" style="font-size: 24px;">
                        ℃
                    </el-col>
                </el-row>
                <br />
                <br />
                <br />
                <br />
                <el-row class="flex-container">
                    <el-col :span="4">
                        <el-image style="width: 24px; height: 24px; vertical-align: middle"
                            src="/static/images/pressure.svg"></el-image>
                        ((realtimeWeather.pressure))hPa
                    </el-col>
                    <el-col :span="4">
                        <el-image style="width: 24px; height: 24px; vertical-align: middle"
                            src="/static/images/humidness.svg"></el-image>
                        ((realtimeWeather.humidness))%
                    </el-col>
                    <el-col :span="4">
                        <el-image style="width: 24px; height: 24px; vertical-align: middle"
                            src="/static/images/precipitation.svg"></el-image>
                        ((realtimeWeather.precipitation))mm
                    </el-col>
                    <el-col :span="4">
                        <el-image style="width: 24px; height: 24px; vertical-align: middle"
                            src="/static/images/wind.svg"></el-image>
                        ((realtimeWeather.wind))
                    </el-col>
                </el-row>

            </el-card>
        </el-row>
        <br />
        <el-row>
            <el-card style="width: 1200px;height: 400px; margin: 0 auto; text-align: center;">
                <el-row>
                    (( weeklyWeatherList[0].updateTime )) 发布
                </el-row>
                <el-row class="flex-container" :gutter="10">
                    (% for ww in weeklyWeatherList %)
                    <el-col :span="3.4">
                        <el-card style="width: 150px; height: 350px; margin: 0 auto; text-align: center;">
                            <el-row>
                                {{ weekDay( '((ww.date))' ) }}
                            </el-row>
                            <el-row>
                                ((ww.date))
                            </el-row>
                            <el-image style="width: 32px; height: 32px; vertical-align: middle"
                                src="/static/images/weather/((ww.weather)).svg"></el-image>
                            <el-row>
                                ((ww.weather))
                            </el-row>
                            <el-row>
                                ((ww.windDirection))
                            </el-row>
                            <el-row>
                                ((ww.windPower))
                            </el-row>
                            <el-row>
                                ((ww.maxTemp))℃
                            </el-row>
                            <el-row>
                                <el-image style="width: 48px; height: 48px; vertical-align: middle"
                                src="/static/images/temperatrue.svg"></el-image>
                            </el-row>
                            <el-row>
                                ((ww.minTemp))℃
                            </el-row>
                            <el-image style="width: 32px; height: 32px; vertical-align: middle"
                                src="/static/images/weather/((ww.nightWeather)).svg"></el-image>
                            <el-row>
                                ((ww.nightWeather))
                            </el-row>
                            <el-row>
                                ((ww.nightWindDirection))
                            </el-row>
                            <el-row>
                                ((ww.nightWindPower))
                            </el-row>
                        </el-card>
                    </el-col>
                    (% endfor %)
                </el-row>
            </el-card>
        </el-row>
        <br/>
        <el-row>
            <el-image style="display: block; margin: 0 auto; width: 333px; height: 200px;" src="/static/images/logo.png" />
        </el-row>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            week: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
        },
        methods: {
            weekDay(date) {
                // date = "2023-01-01 12:00:00"
                var date = new Date(date);
                return this.week[date.getDay()];
            },
        }
    });
</script>

</html>